<template>
  <div>
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
    <DeviceHistoryRemark
      @refreshTable="refreshTable"
      :device-attr="deviceAttr"
      :visible.sync="deviceHistoryRemarkVisible"
    ></DeviceHistoryRemark>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import DeviceHistoryRemark from './components/DeviceHistoryRemark'
import { deviceHistoryList } from '@/api/device'
import { typeMap } from '@/utils/format'
import formatter from '@/utils/format'
export default {
  name: 'deviceHistory',
  components: { TableSearch, DeviceHistoryRemark },
  data() {
    return {
      form: {
        endTime: null,
        startTime: null,
        deviceStatus: 'ALL',
      },
      deviceHistoryRemarkVisible: false,
      deviceAttr: {},
      searchPath: '/web/device-management/device-history/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'deviceId',
          placeholder: '请输入设备号',
          clearable: true,
          resourceId: '/web/device-management/device-history/设备编号',
        },
        {
          type: 'text',
          value: 'stationName',
          placeholder: '请输入电站名',
          clearable: true,
          resourceId: '/web/device-management/device-history/电站',
        },
        {
          type: 'text',
          value: 'agentName',
          placeholder: '请输入代理商名',
          clearable: true,
          resourceId: '/web/device-management/device-history/代理商',
        },
        {
          slot: 'date',
        },
        {
          type: 'radio',
          value: 'deviceStatus',
          options: [
            {
              text: '全部',
              label: 'ALL',
            },
            {
              text: '未使用',
              label: 0,
            },
            {
              text: '正使用',
              label: 1,
            },
          ],
          resourceId: '/web/device-management/device-history/状态',
        },
      ],
      loading: false,
      tableData: {},
      columns: [
        {
          label: '设备编号',
          prop: 'deviceId',
          resourceId: '/web/device-management/device-history/设备编号',
        },
        {
          label: '设备类型',
          prop: 'deviceType',
          resourceId: '/web/device-management/device-history/设备类型',
          formatter: (row) => {
            return row.deviceType.description
          },
        },
        {
          label: '电站',
          prop: 'stationName',
          resourceId: '/web/device-management/device-history/电站',
        },
        {
          label: '代理商',
          prop: 'agentName',
          resourceId: '/web/device-management/device-history/代理商',
        },
        {
          label: '添加时间',
          prop: 'createTime',
          resourceId: '/web/device-management/device-history/添加时间',
          formatter: (row) => formatter('createTime', row.createTime),
        },
        {
          label: '状态',
          prop: 'deviceStatus',
          resourceId: '/web/device-management/device-history/状态',
          formatter: (row) => {
            return row.deviceStatus ? '正使用' : '未使用'
          },
        },
        {
          label: '备注',
          prop: 'deviceRemark',
          resourceId: '/web/device-management/device-history/备注',
        },
        {
          label: '操作',
          resourceId: '/web/device-management/device-history/操作',
          buttons: [
            {
              label: '添加备注',
              size: 'small',
              resourceId: '/web/device-management/device-history/添加备注',
              click: (row) => {
                this.deviceHistoryRemarkVisible = true
                this.deviceAttr = row
              },
            },
          ],
        },
      ],
    }
  },
  methods: {
    reset() {
      this.form = {
        cardNum: '',
        mobile: '',
        endTime: null,
        startTime: null,
        status: null,
      }
    },
    handleTableData(params) {
      if (params.deviceStatus === 'ALL') {
        delete params.deviceStatus
      }
      deviceHistoryList(params).then((res) => {
        this.tableData = {
          list: res.list,
          totalCount: res.totalAmount,
        }
      })
    },
    refreshTable() {
      this.$refs['tableSearch'].refreshTable()
    },
  },
}
</script>
